<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="l2d" uri="/WEB-INF/LongToDateTag.tld"%>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>photos</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link href="//cdn.bootcss.com/blueimp-file-upload/9.12.5/css/jquery.fileupload.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/blueimp-file-upload/9.12.5/css/jquery.fileupload-ui.min.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/vendor/jquery.ui.widget.min.js"></script>

<!-- The Templates plugin is included to render the upload/download listings -->
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>

<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.iframe-transport.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-process.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-image.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-validate.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-ui.min.js"></script>
<style type="text/css">
.bar { height: 18px; background: green; }
</style>
<script type="text/javascript">
	$(function(){
		$('#fileupload').fileupload({
		    url: "${pageContext.request.contextPath }/fileupload/ajaxupload",
		    dataType: 'json',
		    add: function (e, data) {
// 	            data.context = $('<p/>').text('上传中...').appendTo(document.body);
// 	            data.submit();
	            data.context = $('<button class="btn btn-success btn-sm"/>').text('上传')
                .appendTo("#files")
                .click(function () {
                    $(this).replaceWith($('<p id="fileupload_uploading_info" class="text-info"/>').text('上传中...'));
                    data.submit();
                });
	        },
		    done: function (e, data) {
		        $("#fileupload_uploading_info").remove();
		    	console.log("上传完成<br/>e:%o,data:%o",e,data);
                var file=data.result;
		    	console.log("data.result:%s",file);
				$('#fileupload').next().attr("src",file.url);
		    },
		    progressall: function (e, data) {
		        var progress = parseInt(data.loaded / data.total * 100, 10);
		        $('#progress').css('width', progress+'%').text(progress+'%'+" Complete");
		    }
		});
		
		$("#weixin_image").fileupload({  
            url: '${pageContext.request.contextPath }/fileupload/ajaxupload',  
            sequentialUploads: true  
        }).bind('fileuploadprogress', function (e, data) {  
            var progress = parseInt(data.loaded / data.total * 100, 10);  
            $("#weixin_progress").css('width',progress + '%');  
            $("#weixin_progress").html(progress + '%');  
        }).bind('fileuploaddone', function (e, data) {  
            $("#weixin_show").attr("src",data.result.url);  
            $("#weixin_upload").css({display:"none"});  
            $("#weixin_cancle").css({display:""});  
        });  
		
		$('#uploads').fileupload({
            url: '${pageContext.request.contextPath }/fileupload/ajaxupload',
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            maxFileSize: 999000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
		});

		$('#multi_uploads').fileupload({
            url: '${pageContext.request.contextPath }/fileupload/multiupload',
            singleFileUploads:false,
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            maxFileSize: 999000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            add: function (e, data) {
                data.context = $('<button class="btn btn-success btn-sm"/>').text('上传')
                    .appendTo("#multi_files")
                    .click(function () {
                        $(this).replaceWith($('<p id="multi_fileupload_uploading_info" class="text-info"/>').text('上传中...'));
                        data.submit();
                    });
            },
            done: function (e, data) {
                $("#multi_fileupload_uploading_info").remove();
                console.log("上传完成<br/>e:%o,data:%o",e,data);
                var file=data.result;
                console.log("data.result:%s",file);
                for(var f in file){
                    $("<img />").attr("src",file[f].url).appendTo("#multi_files");
                }
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#multi_progress').css('width', progress+'%').text(progress+'%'+" Complete");
            }
        });
	});
</script>
</head>
<body>
	<div class="container">
		<div class="page-header">
		  <h1>多文件上传 <a href="https://blueimp.github.io/jQuery-File-Upload" target="_blank"><small>https://blueimp.github.io/jQuery-File-Upload</small></a></h1>
		</div>
		<!-- <div class="row fileupload-buttonbar" style="padding-left: 15px;">
			<div class="thumbnail col-sm-6">
				<img id="weixin_show"
					style="height: 180px; margin-top: 10px; margin-bottom: 8px;" src="" data-holder-rendered="true">
				<div class="progress progress-striped active" role="progressbar"
					aria-valuemin="10" aria-valuemax="100" aria-valuenow="0">
					<div id="weixin_progress" class="progress-bar progress-bar-success"
						style="width: 0%;"></div>
				</div>
				<div class="caption" align="center">
					<span id="weixin_upload" class="btn btn-primary fileinput-button">
						<span>上传</span> 
						<input type="file" id="weixin_image" name="file" multiple>
					</span> 
					<a id="weixin_cancle" href="javascript:void(0)" class="btn btn-warning" role="button" onclick="cancleUpload('weixin')" style="display: none">删除</a>
				</div>
			</div>
		</div> -->
		
        <form id="uploads"  enctype="multipart/form-data">
	        <!-- Redirect browsers with JavaScript disabled to the origin page -->
	        <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
	        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
	        <div class="row fileupload-buttonbar">
	            <div class="col-lg-7">
	                <!-- The fileinput-button span is used to style the file input field as button -->
	                <span class="btn btn-success fileinput-button">
	                    <i class="glyphicon glyphicon-plus"></i>
	                    <span>添加文件...</span>
	                    <input type="file" name="files[]" multiple="multiple">
	                </span>
	                <button type="submit" class="btn btn-primary start">
	                    <i class="glyphicon glyphicon-upload"></i>
	                    <span>开始上传</span>
	                </button>
	                <button type="reset" class="btn btn-warning cancel">
	                    <i class="glyphicon glyphicon-ban-circle"></i>
	                    <span>Cancel upload</span>
	                </button>
	                <button type="button" class="btn btn-danger delete">
	                    <i class="glyphicon glyphicon-trash"></i>
	                    <span>Delete</span>
	                </button>
	                <input type="checkbox" class="toggle">
	                <!-- The global file processing state -->
	                <span class="fileupload-process"></span>
	            </div>
	            <!-- The global progress state -->
	            <div class="col-lg-5 fileupload-progress fade">
	                <!-- The global progress bar -->
	                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
	                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
	                </div>
	                <!-- The extended global progress state -->
	                <div class="progress-extended">&nbsp;</div>
	            </div>
	        </div>
	        <!-- The table listing the files available for upload/download -->
	        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
	    </form>
		<!-- The blueimp Gallery widget -->
		<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
		    <div class="slides"></div>
		    <h3 class="title"></h3>
		    <a class="prev">‹</a>
		    <a class="next">›</a>
		    <a class="close">×</a>
		    <a class="play-pause"></a>
		    <ol class="indicator"></ol>
		</div>
		<!-- The template to display files available for upload -->
		<script id="template-upload" type="text/x-tmpl">
		{% for (var i=0, file; file=o.files[i]; i++) { %}
			<tr class="template-upload fade">
				<td>
					<span class="preview"></span>
				</td>
				<td>
					<p class="name">{%=file.name%}</p>
					<strong class="error text-danger"></strong>
				</td>
				<td>
					<p class="size">Processing...</p>
					<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
				</td>
				<td>
					{% if (!i && !o.options.autoUpload) { %}
						<button class="btn btn-primary start" disabled>
							<i class="glyphicon glyphicon-upload"></i>
							<span>Start</span>
						</button>
					{% } %}
					{% if (!i) { %}
						<button class="btn btn-warning cancel">
							<i class="glyphicon glyphicon-ban-circle"></i>
							<span>Cancel</span>
						</button>
					{% } %}
				</td>
			</tr>
		{% } %}
		</script>
		<!-- The template to display files available for download -->
		<script id="template-download" type="text/x-tmpl">
		{% for (var i=0, file; file=o.files[i]; i++) { %}
			<tr class="template-download fade">
				<td>
					<span class="preview">
						{% if (file.thumbnailUrl) { %}
							<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
						{% } %}
					</span>
				</td>
				<td>
					<p class="name">
						{% if (file.url) { %}
							<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
						{% } else { %}
							<span>{%=file.name%}</span>
						{% } %}
					</p>
					{% if (file.error) { %}
						<div><span class="label label-danger">Error</span> {%=file.error%}</div>
					{% } %}
				</td>
				<td>
					<span class="size">{%=o.formatFileSize(file.size)%}</span>
				</td>
				<td>
					{% if (file.deleteUrl) { %}
						<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
							<i class="glyphicon glyphicon-trash"></i>
							<span>Delete</span>
						</button>
						<input type="checkbox" name="delete" value="1" class="toggle">
					{% } else { %}
						<button class="btn btn-warning cancel">
							<i class="glyphicon glyphicon-ban-circle"></i>
							<span>Cancel</span>
						</button>
					{% } %}
				</td>
			</tr>
		{% } %}
		</script>
		<hr/>
		<h2>单文件上传</h2>
		<div id="files">
		    <input id="fileupload" class="form-control" type="file" name="file" />
		    <img src=""/>
		</div>
		<div class="progress">
			<div id="progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
		</div>
		<h2>多文件上传</h2>
		<div id="multi_files">
			<input id="multi_uploads" class="form-control" type="file" name="multifile" multiple />
		</div>
		<div class="progress">
			<div id="multi_progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
		</div>
	</div>
</body>
</html>